<template>
  <div>
    <!-- 列表页面 -->
    <div class="container" v-if="showType === 'listPage'">
      <div class="header">
        <div class="title">机器列表</div>
        <div>
          <el-button @click="exprotExcel">导出</el-button>
        </div>
      </div>
      <div class="addMachine">
        <el-button type="success" round @click="handleAdd">添加机器</el-button>
      </div>
          <!-- 表格 -->
      <el-table :data="tableData" stripe>
        <el-table-column prop="id" label="id" width="220"></el-table-column>
        <el-table-column prop="mid" label="机器编号" width="220"></el-table-column>
        <el-table-column property="mname"  label="机器名称" width="220"> </el-table-column>
        <el-table-column property="location"  label="机器地址" width="220"> </el-table-column>
        <el-table-column property="remark"  label="备注" width="220"> </el-table-column>
        <el-table-column label="操作" width="170">
          <template #default="scope">
            <el-button plain size="small" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button plain size="small" type="danger" @click="handleDelete(scope.row.id)"
              v-permission="{ permission: '删除机器', type: 'disabled' }">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>


    <!-- 添加页面 -->
    <machine-add v-else-if="showType === 'addPage'" @addClose="addClose"></machine-add>
    <!-- 编辑页面 -->
    <machine-modify v-else-if="showType === 'editPage'" @editClose="editClose" :editMachineID="editMachineID"></machine-modify>
  </div>
</template>

<script>
  import machine from '@/model/machine'
  import MachineAdd from './machine-create.vue'
  import MachineModify from './machine-modify.vue'
  import ParseTime from '@/lin/util/parseTime'

  export default {
    components: {
      MachineAdd,
      MachineModify
    },
    data() {
      return {
        tableData: [],
        editMachineID: 1,
        showType: 'listPage'
      }
    },
    async created() {
      this.loading = true
      await this.getMachines()
      this.loading = false
    },
    methods: {
      async getMachines() {
        try {
          const machines = await machine.getMachines()
          this.tableData = machines
        } catch (error) {
          if (error.code === 10020) {
            this.tableData = []
          }
        }
      },
      handleAdd(val) {
        this.showType = 'addPage'
      },
      handleEdit(id) {
        this.showType = 'editPage'
        this.editMachineID = id
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该机器, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async () => {
          const res = await machine.deleteMachine(id)
          if (res.code < window.MAX_SUCCESS_CODE) {
            this.getMachines()
            this.$message({
              type: 'success',
              message: `${res.message}`,
            })
          }
        })
      },
      addClose() {
        this.showType = 'listPage'
        this.getMachines()
      },
      editClose() {
        this.showType = 'listPage'
        this.getMachines()
      },
      // 导出表格
      exprotExcel() {
        import('@/lin/util/exportExcel').then(excel => {
          const tHeader = ['timestamp', 'title', 'label', 'importance', 'status']
          const filterVal = ['timestamp', 'title', 'label', 'importance', 'status']
          const data = this.formatJson(filterVal)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'table-list',
          })
        })
      },
      // 将表单格式化为json数据
      formatJson(filterVal) {
        return this.tableData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return ParseTime(v[j])
          }
          return v[j]
        }), )
      },
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 0 30px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        height: 59px;
        line-height: 59px;
        color: $parent-title-color;
        font-size: 16px;
        font-weight: 500;
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
    }

    .addMachine {
      padding-bottom: 10px;
    }
  }
</style>
